<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-row layui-col-space10">
    <div class="layui-card layui-col-md6">
        <div class="layui-card-header">卡片面板</div>
        <div class="layui-card-body">
            <div id="rate-records" style="width: 100%;min-height:400px"></div>
        </div>
    </div>
    <div class="layui-card layui-col-md6">
        <div class="layui-card-header">卡片面板</div>
        <div class="layui-card-body">
            <div id="point-records" style="width: 100%;min-height:400px"></div>
        </div>
    </div>
</div>
<script src="/echarts/echarts.js"></script>
<script src="/echarts/echarts.min.js"></script>
<script>
    layui.use(['jquery'],function () {
        var $ = layui.jquery;
        var rateRecords = echarts.init(document.getElementById('rate-records'), 'walden');
        var pointRecords = echarts.init(document.getElementById('point-records'), 'walden');
        var rateOption;
        var pointOption;
        $.ajax({
            url:'/system/visualization/rate',
            method:"post",
            success:function (res) {
                rateOption = {
                    title: {
                        // text: 'Referer of a Website',
                        // subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data:res.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                rateRecords.setOption(rateOption)
            }
        })

        $.ajax({
            url:'/system/visualization/point',
            method:"post",
            success:function (res) {
                pointOption = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: res.data.label,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'point',
                            type: 'bar',
                            barWidth: '60%',
                            data: res.data.data
                        }
                    ]
                };
                pointRecords.setOption(pointOption)
            }
        })

    })
</script>

</body>
</html>